<template>
	<view class="">
		<u-navbar title="申请退款" placeholder autoBack></u-navbar>
		<view class="tips p-2 flex align-center justify-center">
			<u-image src="/static/user/alertcircle.png" width="44rpx" height="44rpx"></u-image>
			<view class="ml-2 font-30" style="color: #FF8702;">请与商家协商，确认达成一致后填写协商好的退款金额</view>
			<view class="" style="width: 20rpx;"></view>
		</view>
		<view class="bg-white flex align-center justify-between px-2 border-bottom" style="height: 104rpx;"
			@click="statusShow = true">
			<view class="font-30 text-main">货物状态</view>
			<view class="flex align-center">
				<view class="font-30 text-light6">{{statusName?statusName:'请选择'}}</view>
				<view class="ml-1">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="bg-white flex align-center justify-between px-2 border-bottom" style="height: 104rpx;"
			@click="show=true">
			<view class="font-30 text-main">退款原因</view>
			<view class="flex align-center">
				<view class="font-30 text-light6">{{reson?reson:'请选择'}}</view>
				<view class="ml-1">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="border-bottom p-2 bg-white">
			<view class="font-30 text-main">退款金额</view>
			<view class="mt-2 font-weight-bolder font-lg text-main">
				￥{{detail.goods_order[0].total_price}}
			</view>
			<!-- <view class="mt-2 font-24 text-light9">
				不可修改，含发货邮费￥{{detail.express_price}}
			</view> -->

		</view>

		<view class="mt-2 bg-white p-2">
			<view class="font-30 text-main">补充描述和凭证</view>
			<view class="mt-2">
				<u-textarea v-model="comment" border="none" placeholder="输入描述（200字）" height="200rpx" count
					maxlength="200"></u-textarea>
			</view>

			<view class="mt-2">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="3">
					<u-image src="/static/user/addpic1.png" width="156rpx" height="156rpx"></u-image>
				</u-upload>
			</view>
		</view>


		<commonButton title="提交" @click="submint"></commonButton>

		<u-popup :show="statusShow" closeable @close="statusShow = false">
			<view class="bg-white" style="height: 400rpx;">
				<view class="flex align-center justify-center font-30 font-weight-bold mt-2">退货状态</view>
				<view class="p-2 mt-5" v-for="(item,index) in statusList" :key="index">
					<view class="flex align-center" @click="change(item,index)">
						<view class="font-30">{{item}}</view>
						<view class="ml-auto">
							<u-image :src="statusIndex===index?'/static/select.png':'/static/noselect.png'" width="15"
								height="15">
							</u-image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-picker :show="show" :columns="columns" @cancel="show=false" @close="show=false"
			@confirm="confirm"></u-picker>



	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tools.js'
	export default {
		data() {
			return {
				comment: '',
				statusIndex: 0,
				statusList: ['未收到货', '已收到货'],
				statusName: '',
				statusShow: false,
				causeShow: false,
				causeList: [],
				causeName: '',
				fileList1: [],
				show: false,
				columns: [
					['拍错/多拍/不喜欢', '规格/品质等与商品不符', '商家发错货', '包装/商品破损/污渍/变形', '少件/漏发']
				],
				reson:'',
				resonIndex:0,
				type:'',
				images:[],
				refundId:'0'
			}
		},
		onLoad(e) {
			this.type = e.type
			this.statusIndex = e.type==='1'?0:1
			this.statusName = this.statusList[this.statusIndex]
			this.status = e.status
			if(e.status==='edit'){
				this.refundId = this.detail.id
			}
		},
		computed: {
			...mapState({
				detail: state => state.order.orderDetial
			})
		},
		methods: {
			change(item, index) {
				this.statusIndex = index
				this.statusShow = false
				this.statusName = item
			},
			confirm(e){
				this.reson = e.value[0]
				this.resonIndex = e.indexs[0]
	            this.show = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					this.$api.upload().then(res => {
						if (res.code === 1) {
							uni.uploadFile({
								url: res.data.uploadurl,
								filePath: url,
								name: 'file',
								header: {
									"token": res.data.multipart.token
								},
								formData: {
									user: 'test',
									"token": res.data.multipart.token
								},
								success: (result) => {
									console.log(result)
									let data = JSON.parse(result.data)
									
									resolve('/'+data.key)
									// let data = JSON.parse(result.data)
									// this.images.push(data.data.url)
									
					
								}
							})
					
						}
					
					})
				
				})
			},
			submint() {
				
				if(uni.$u.test.isEmpty(this.comment)){
					return uni.showToast({
						title: '请填写退货原因',
						icon:'none'
					});
				}
			
				this.fileList1.forEach(item=>{
					this.images.push(item.url)
				})
				
				let parmar = {
					order_goods_id:this.detail.goods_order[0].id,
					order_id:this.status==='add'?this.detail.id:this.detail.order_id,
					type:this.type,
					goods_status:this.statusIndex+1,
					refund_reason:this.resonIndex+1,
					money:this.detail.goods_order[0].total_price,
					reason:this.comment,
					images:this.images.join(','),
					refund_id:this.refundId
				}

				this.$api.addservice(parmar).then(res=>{
					if(res.code === 1){
						uni.showToast({
							title: '申请成功',
							icon:'success'
						});
						setTimeout(()=>{
							if(this.status==='add'){
								uni.navigateBack({
									delta: 3
								});
							}else{
								uni.navigateBack({
									delta: 1
								});
							}
							
						},1000)
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.tips {
		height: 146rpx;
		background: #FFF4E1;
	}
</style>